<template>
  <div class="m-container">
     <div class="m-title"><span class="icon"></span>客户故障申告通知管理新建页面</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
    <el-row  :gutter="10">
      <el-col :span="10">
        <el-form-item label="客户名称:" prop="name">
        <DicCustomerSelect
             :value="ruleForm.name"
              title="客户查询列表"
              ref="auditIdRef"
              size="50%"
               @inLoadAjax="custQueryListHandel"
        >
          <el-form
                ref="formDataRef"
                :model="troubleTicketFormData" 
                :label-position="labelPosition"
                label-width="100px"
          >
            <el-row :gutter="10">
                 <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="客户名称" label-width="70px" >
                        <el-input
                          placeholder="请输入内容"
                          v-model="troubleTicketFormData.custName"
                          class="input-with-select"
                        >
                        
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="客户名称" label-width="70px" >
                        <el-input
                          placeholder="请输入内容"
                          v-model="troubleTicketFormData.custName"
                          class="input-with-select"
                        >
                        
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="客户名称" label-width="70px" >
                        <el-input
                          placeholder="请输入内容"
                          v-model="troubleTicketFormData.custName"
                          class="input-with-select"
                        >
                        
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">
                      <el-form-item label="客户名称" label-width="70px" >
                        <el-input
                          placeholder="请输入内容"
                          v-model="troubleTicketFormData.custName"
                          class="input-with-select"
                        >
                        
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <el-button type="primary">查询</el-button>
                    <el-button type="primary">保存</el-button>
                  </el-col>
            </el-row>
            <DicTable
              ref="dictable"
              stripe
              :columnData="tableColumns"
              max-height="400"
              :tableData="tableData"
              :loading="tableLoading"
              :currentPage="tablePage.page"
              :pageSize="tablePage.pageSize"
              :totalResult="tablePage.totalResult"
              :pager="true"
              @on-page-change="handlePageChange"
            >
              <template #nickname111header="{ row }">
                <a href="">{{row.nickname}}</a>
              </template>
            </DicTable>
          </el-form>
        </DicCustomerSelect>
      </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="通知的业务范围:" prop="name">
          <el-col :span="2"><el-checkbox :indeterminate="isIndeterminate" v-model="businessCheckAll" @change="handleCheckAllChange">全选</el-checkbox></el-col>
          <el-col :span="22">
            <el-checkbox-group v-model="ruleForm.businessScopeValue" @change="handleCheckedisIndeterminateChange">
              <el-checkbox v-for="item in selectArr" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
       </el-form-item>
       <div class="m-box">
           <el-col :span="24" class="m-mpd"><el-checkbox v-model="checked">关键电路</el-checkbox></el-col>
           <el-col :span="8">
             <el-form-item label="是否对指定用户进行关键电路设定:" prop="name" label-width="180px">
               <el-select v-model="ruleForm.isValue" placeholder="请选择">
                  <el-option
                    v-for="item in selectIsNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
             </el-form-item>
            </el-col>
            <el-col  :span="24">
               <el-col :span="8">
                <el-form-item label="客户名称:" prop="name" label-width="180px" class="m-select">
                  <el-select v-model="ruleForm.name" placeholder="请选择">
                      <el-option
                        v-for="item in selectIsNo"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                 <DicCustomerSelect
                 :value="ruleForm.name"
                  title="客户查询列表"
                  ref="auditIdRef"
                  size="50%"
                  @inLoadAjax="custQueryListHandel"
                
                ></DicCustomerSelect>
              </el-col>
              <el-col :span="8">
                 <el-button type="primary">添加</el-button>
              </el-col>
            </el-col>
          </div>
      </el-col>
        <el-col :span="16" class="m-mt20">
             <el-form-item label="政企部信息接收人:" prop="name" label-width="150px">
                <el-input
                  placeholder="请输入内容"
                v-model="ruleForm.name"
                  :disabled="true">
                </el-input>
             </el-form-item>
        </el-col>
        <el-col :span="16">
             <el-form-item label="故障类别:" prop="name" label-width="150px">
             <el-col :span="2"><el-checkbox :indeterminate="isfailure" v-model="failureCheckAll" @change="handleFailureCheckAllChange">全选</el-checkbox></el-col>
            <el-col :span="22">
              <el-checkbox-group v-model="ruleForm.failureScopeValue" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="item in selectFailureArr" :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>
            </el-col>
             </el-form-item>
        </el-col>
        <el-col :span="16">
             <el-form-item label="启动通知时间点:" prop="name" label-width="150px">
           
                 <el-select v-model="ruleForm.isValue" placeholder="请选择">
                  <el-option
                    v-for="item in startNotificationArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
             </el-form-item>
        </el-col>
        <el-col :span="16">
             <el-form-item label="通知方式:" prop="name" label-width="150px">
                <el-radio-group v-model="ruleForm.radio" class="el-radio-box">
                  <el-radio :label="3">邮件</el-radio>
                  <el-radio :label="6">短信</el-radio>
                </el-radio-group>
             </el-form-item>
        </el-col>
        <el-col :span="16">
             <el-form-item label="通知时段" prop="name" label-width="150px">
                 <el-select v-model="ruleForm.noticeValue" placeholder="请选择">
                      <el-option
                        v-for="item in noticeTimeArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
             </el-form-item>
        </el-col>
    </el-row>
      
      <el-form-item  class="m-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >下一步</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
 
  </div>
</template>

<script>
import DicCustomerSelect from "@/components/customer/form/DicCustomerSelect";
import DicTable from "@/components/public/DicTable";
export default {
  data() {
    return {
      labelPosition:"left",
      comName: "",
      checked:true,
      businessCheckAll:false,
      isIndeterminate:false,
      failureCheckAll:false,
      isfailure:false,
      
      ruleForm: {
        name: "",//客户名称
        businessScopeValue:["全部业务"],//通知业务范围
        failureScopeValue:[],//故障类别
        noticeValue:"1",
        isValue:"0",
        radio:3
      },
  
      // 
      selectArr:["全部业务","IDC业务","综合VPN","4008","一码通95专线"],
      selectFailureArr:["业务中断","误码","瞬断","时延大","丢包","故障已恢复查原因","其他场景"],
     startNotificationArr:[],//启动通知
     selectOption:[
       {
          flag:'control_type',//直管类型
          val:["全部业务","IDC业务","综合VPN","4008","一码通95专线"]
        },
         {
          flag:'cert_type',//改名改证件直管类型
          val:[]
        },
      ],
      // 通知时段
      noticeTimeArr:[
        {
           value: '0',
          label: '7*24'
        },
        {
           value: '1',
          label: '7*15（7:30-22:30）'
        }
      ],
      selectIsNo: [{
          value: '',
          label: '请选择'
        }, {
          value: '0',
          label: '是'
        }, {
          value: '1',
          label: '否'
        }],
      rules: {
        name: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    // 客户名称表单
    troubleTicketFormData:{
      custName:"客户名称",
      custoldpartCode:"客户编码",
      custManegerCode:"客户经理编码",
      custManegerName:"客户经理名称"
    },
    // 
     tableColumns: [
     
        { type: "checkbox", width: 50, fixed: null },
        { field: "name", title: " 客户编码", width: 200 },
        { slotName: "nickname1111", title: "客户名称", width: 300 ,showoverflow:true},
        { field: "sex", title: "客户经理编码", width: 200 },
        { field: "role", title: "客户经理名称", width: 200 },
       
      ],
      tableData: [
        {id:10001,name:"Test1111111111111111111111111",nickname:"T1",role:"Develop",sex:"Man",age:28,address:"vxe-table 从入门到放弃"},
        {id:10002,name:"Test2",nickname:"T2",role:"Test",sex:"Women",age:22,address:"Guangzhou"},
        {id:10003,name:"Test3",nickname:"T3",role:"PM",sex:"Man",age:32,address:"Shanghai"},
        {id:10004,name:"Test4",nickname:"T4",role:"Designer",sex:"Women ",age:23,address:"vxe-table 从入门到放弃"},
        {id:10005,name:"Test5",nickname:"T5",role:"Develop",sex:"Women ",age:30,address:"Shanghai"},
        {id:10006,name:"Test6",nickname:"T6",role:"Designer",sex:"Women ",age:21,address:"vxe-table 从入门到放弃111111111111111111111111"},
     
      ],
      tableLoading: false,
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 8,
      },
    };
  },
  components: {
    DicCustomerSelect,
    DicTable,
  },
  created() {},
  mounted() {},
  methods: {
    selectCustomer(userDate) {
      this.ruleForm.name = userDate.name;
      this.ruleForm.userDate = userDate;
      
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
        } else {
          
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.findList();
    },
    // 全选
    handleCheckAllChange(val){
        this.ruleForm.businessScopeValue= val ? this.selectArr  : [];
        this.isIndeterminate = false;
    },

     
      handleCheckedisIndeterminateChange(value){
        let checkedCount = value.length;
        this.businessCheckAll = checkedCount === this.selectArr.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.selectArr.length;
      },
       // 故障类别-全选
      handleFailureCheckAllChange(val){
        this.ruleForm.failureScopeValue= val ? this.selectFailureArr  : [];
        this.isfailure = false;

      },
      // 故障类别
      handleCheckedCitiesChange(value){
         let checkedCount = value.length;
        this.failureCheckAll = checkedCount === this.selectFailureArr.length;
        this.isfailure = checkedCount > 0 && checkedCount < this.selectFailureArr.length;
      },
    findList() {
      this.tableData = [
        {
          id: 10008,
          name: "Test11",
          nickname: "T11",
          role: "Develop",
          sex: "Man ",
          age: 35,
          address: "vxe-table 从入门到放弃11",
        },
      ];
      this.tablePage.totalResult=1;
    },
    editRow(row) {
      
    },
    // 点击客户名称加载的列表
    custQueryListHandel(){

    },
    selectCustomer(){}

  },
};
</script>
<style lang="scss" scoped>
.el-radio-box{
  margin-top: 0.1rem
}
.m-mt20{
  margin-top: 0.2rem
}
.m-mpd{
margin-bottom: 0.2rem;
}
.m-footer{
  margin-top: 0.3rem;
  text-align: center;
}
.m-box{
  border: 1px solid #eee;
  padding: 0.1rem 0.2rem;
  background: #fff;
  margin-left:1.7rem;
  overflow: hidden;
  margin-right:1.7rem;
}
.m-container {
  padding: 0.2rem;
  background-color: #fff;
}
.m-title {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: rgb(245, 111, 60);
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.el-select{
  width: 100%
}
</style>
